<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title> 
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/swiper.css" />
	<link rel="stylesheet" type="text/css" href="../css/treeace.css"/>
</head>
<body class="white">
	<header class="mui-bar mui-bar-transparent short" style="width: 100%;">
	    <a class="mui-action-back mui-icon mui-pull-left bexta-white-back" style="width: 50px"><span></span></a>
	    <h1 class="mui-title"></h1>
	</header>
	<div class="mui-content mui-scroll-wrapper detail" id="onescroll">
		<div id="ner" class="mui-scroll" >
			<div id="topHead"><img src="../icon/mask-big.jpg" class="maximg" alt="" /></div>
			<div class="mui-content-padded">
				<div class="names"></div>
				<div class="server">
					<div class="mui-pull-right casename"></div>
					<div class="mui-pull-left">主营业务</div>
				</div>
			</div>
			<div class="case">
				<div class="title">主要作品</div>
				<div class="swiper-container" id="swiper2">
					<div class="swiper-wrapper">
						<div class="swiper-slide" >
							<img src="../icon/mask-sm.jpg"  alt="" data-preview-src="" data-preview-group="photo_list"  />
							<p></p>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-content-padded bodys">
				<div class="title">平台详情</div>
				<div class="bodys-content">
					
				</div>
			</div>
		</div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/mui.extend.js"></script>
<script src="../js/bexta.js"></script>
<script>
	var apps, views;
	mui.init({
	})
	mui.plusReady(function () {
	    document.querySelector('.mui-bar-transparent').style.height = (44 + bexta.getStatusHeight()) + 'px';	
	    document.querySelector('.mui-title').style.lineHeight = (50 + bexta.getStatusHeight()) + 'px';	
	   document.querySelector('.mui-bar .mui-icon').style.paddingTop = (10+bexta.getStatusHeight()) + 'px';
	});
	mui.plusReady(function () {
	   	views = bexta.getWebview();
	   	initVue( views.shop )
	   	var scroll = mui('#onescroll.mui-scroll-wrapper').scroll();
	   	mui('.mui-bar-transparent').transparent2({
			scroll:scroll,
   			offset:50,
   			bgr:true,
	   		success:function(obj, opa){
	   			var backbtn = obj.element.querySelector('.bexta-white-back');
	   			document.querySelector('.mui-title').style.opacity = opa;
	   			if( opa > 0.3 ){
	   				backbtn.classList.add('bexta-drak-back');
	   			}else{
	   				backbtn.classList.remove('bexta-drak-back')
	   			}
	   		}
	   	});
	   	views.addEventListener('show', function(){
	   		 bexta.setStatus(true);
	   	});
	});
	function initVue(res){
		document.querySelector('#topHead img').src = res.photo;
		document.querySelector('.names').innerHTML =  res.shop_name;
		document.querySelector('.mui-title').innerHTML =  res.shop_name;
		document.querySelector('.casename').innerHTML = res.commend_shop.join(' ');
		document.querySelector('.bodys-content').innerHTML = res.body;
		if( res.photo_list.length == 0 ){
			document.querySelector('.case').style.display = 'none';
		}else{
			document.querySelector('.case').style.display = 'block';
			var str = '',
			box = document.querySelector('.swiper-wrapper');
			mui.each(res.photo_list, function(){
				str += '<div class="swiper-slide" >' +
						'<img src="'+this.photo+'"  alt="" data-preview-src="" data-preview-group="photo_list"  />' +
						'<p>'+this.title+'</p>' + 
						'</div>';
			});
			box.innerHTML = str;
		}
		
		
		new Swiper('#swiper2', {
			slidesPerView: 3.3, //同时能显示多少个
			paginationClickable: false,
			spaceBetween: "3%", //右间距
			slidesOffsetBefore: 15,
			slidesOffsetAfter: 15,
			freeMode: true //使用惯性滑动
		});
	}
</script>
</body>
</html>
